<!--
 * @Author: MSN
 * @Date: 2022-09-23 15:57:53
 * @LastEditTime: 2023-02-15 11:46:54
 * @LastEditors: MSN
 * @Description: 导航
 * @FilePath: \Egoshop商城项目\src\components\Nav\index.vue
-->
<template>
  <div id="container">
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    style="display:flex;justify-content:space-around;align-items: center;">
    <span style="font-size:24px;color:#fff;font-weight:600">Ego商城后台管理系统</span>
    <template>
      <el-menu-item index="1">
        <router-link to="/product" style="text-decoration: none;display: block;width:100%;height: 100%;">
          <i class="el-icon-search"></i>
          查询商品
        </router-link>
      </el-menu-item>
      <el-menu-item index="2">
        <router-link to="/params" style="text-decoration: none;display: block;width:100%;height: 100%;">
          <i class="el-icon-s-tools"></i>
          规格参数
        </router-link>
      </el-menu-item>
      <el-menu-item index="3">
        <router-link to="/content" style="text-decoration: none;display: block;width:100%;height: 100%;">
          <i class="el-icon-s-goods"></i>
          商品内容
        </router-link>
      </el-menu-item>
    </template>
    <div style="width:240px;height: 61px;display: flex;align-items: center;justify-content: flex-end;">
      <span>{{user}}</span>
      <el-button round size="small" @click="logout">退出登入</el-button>
    </div>
  </el-menu>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  name: "Nav",
  data() {
      return {
        activeIndex: "1",
      };
    },
    computed:{
      ...mapState("LoginModule",{
        user: state =>  state.user //简写方式
        /* user: (state) => {
          return state.user
        } */
      })
    },
    mounted(){
      if(localStorage.getItem("currentIndex")){
        this.activeIndex = localStorage.getItem("currentIndex")
      }
    },
    methods: {
      ...mapMutations("LoginModule",["clearToken","clearUser"]),
      handleSelect(key, keyPath) {
        localStorage.setItem("currentIndex",key)
      },
      logout(){
        localStorage.removeItem("egouser")
        localStorage.removeItem("token")
        this.clearToken()
        this.clearUser()
        this.$router.replace("/login")
      }
    }
}
</script>

<style scoped>

</style>